import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
import axios from 'axios'
import { Message } from 'element-ui'

Vue.use(VueRouter)

// 导入token工具类
import { getToken } from '../utils/token'

// 导入组件
// import Login from '@/views/login'
// import Layout from '@/views/layout'
// import Chart from '@/views/layout/chart'
// import User from '@/views/layout/user'
// import Enterprise from '@/views/layout/enterprise'
// import Question from '@/views/layout/question'
// import Subject from '@/views/layout/subject'
const Login = () => import('@/views/login')
const Layout = () => import('@/views/layout')
const Chart = () => import('@/views/layout/chart')
const User = () => import('@/views/layout/user')
const Enterprise = () => import('@/views/layout/enterprise')
const Question = () => import('@/views/layout/question')
const Subject = () => import('@/views/layout/subject')

// 测试组件
import SlotTest from '@/test/slot-test'
import VModelTest from '@/test/v-model-test'
import VModelTestValue from '@/test/v-model-test/parent'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login, meta: { needAuth: false } },
    {
      path: '/layout',
      component: Layout,
      meta: {
        roles: ['超级管理员', '管理员', '老师', '学生']
      },
      children: [
        // 嵌套路由
        {
          path: 'chart',
          component: Chart,
          meta: {
            title: '数据预览',
            fullPath: '/layout/chart',
            icon: 'el-icon-pie-chart',
            roles: ['超级管理员', '管理员', '老师']
          }
        },
        {
          path: 'user',
          component: User,
          meta: {
            title: '用户列表',
            fullPath: '/layout/user',
            icon: 'el-icon-user',
            roles: ['超级管理员', '管理员', '老师']
          }
        },
        {
          path: 'enterprise',
          component: Enterprise,
          meta: {
            title: '企业列表',
            fullPath: '/layout/enterprise',
            icon: 'el-icon-office-building',
            roles: ['超级管理员', '管理员', '老师']
          }
        },
        {
          path: 'question',
          component: Question,
          meta: {
            title: '题库列表',
            fullPath: '/layout/question',
            icon: 'el-icon-edit-outline',
            roles: ['超级管理员', '管理员', '老师', '学生']
          }
        },
        {
          path: 'subject',
          component: Subject,
          meta: {
            title: '学科列表',
            fullPath: '/layout/subject',
            icon: 'el-icon-notebook-2',
            roles: ['超级管理员', '管理员', '老师']
          }
        }
      ]
    },
    {
      path: '/testslot',
      component: SlotTest,
      meta: {
        roles: ['超级管理员', '管理员', '老师', '学生']
      }
    },
    {
      path: '/testvmodel',
      component: VModelTest,
      meta: {
        roles: ['超级管理员', '管理员', '老师', '学生']
      }
    },
    {
      path: '/testvmodelvalue',
      component: VModelTestValue,
      meta: {
        roles: ['超级管理员', '管理员', '老师', '学生']
      }
    }
  ]
})

// 前置导航守卫
router.beforeEach(async (to, from, next) => {
  if (to.meta.needAuth === false) {
    // 不需要判断是否有权限
    next()
  } else {
    // 需要先判断是否有权限
    if (getToken()) {
      // 登录过
      if (store.getters.getUserInfo) {
        if (to.meta.roles.includes(store.getters.getUserInfo.role)) {
          // 仓库中有
          next()
        } else {
          Message.error('您没有权限访问该页面!')
          router.push('/login')
        }
      } else {
        const res = await axios.get('/info')
        if (res.data.code === 200) {
          if (to.meta.roles.includes(res.data.data.role)) {
            store.commit('setUserInfo', res.data.data)
            next()
          } else {
            Message.error('您没有权限访问该页面!')
            router.push('/login')
          }
        } else {
          router.push('/login')
        }
      }
    } else {
      router.push('/login')
    }
  }
})

// 后置导航守卫
router.afterEach((to, from) => {
  window.document.title = to.meta.title || '黑马面面'
})

export default router
